<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import {showToast} from 'vant';
import headerUtil from "./base/common/headerUtil.vue";
import bottomTabUtil from "./base/common/bottomTabUtil.vue";

import reqApis from "../req/reqApis.js";

const currentData = ref<any>({
  show: false,
  headerObj: {
    showType: 8,
    closeBtn: false
  },
  friendList: []

});

const getFriendListFn = () => {
  reqApis.getFriendListApi({}).then((res: any) => {
    currentData.value.friendList = res.data;
  }).catch(err => {
      
  });
};

getFriendListFn();

const headerFn = (i:any) => {
  if(i==0) {
    history.back();
  }
};
const toChat = (friendObj:any) => {
  router.push({path: "/p2pChat", query: {friendId: friendObj.userId, friendName: friendObj.nickName}});
};
const closeLivingFn = () => {

}
const selectFn = (type:any) => {

};

const otherPowerFn = () => {
  currentData.value.show = true;
}
const addFriendFn= () => {
  router.push("/addFriend");
}



</script>
<template>
  <section class="search">
    <headerUtil @myClick="otherPowerFn" :obj="currentData.headerObj" @closeFn="closeLivingFn">通讯录</headerUtil> 
    <div class="content pd">
      <van-swipe-cell class="cell-wrap" v-for="(item, index) in currentData.friendList" :key="index">
        <div class="friend-item" @click="toChat(item)">
          <div class="face" :style="{background: `url(${item.avatar}) no-repeat center`}"></div>
          <div class="name">{{item.nickName}}</div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      
    </div>
    <bottomTabUtil :iNow="1" @myClick="selectFn"></bottomTabUtil>
    <van-overlay :show="currentData.show" @click="currentData.show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="block-item" @click="addFriendFn()">添加好友</div>
        </div>
      </div>
    </van-overlay>
  </section>
</template>

<style lang="less" scoped>
.wrapper {
  margin: .1rem .1rem 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: end;
  height: 100%;
}

.block {
  width: 1.4rem;
  // height: 1.8rem;
  background-color: #fff;
  border-radius: .1rem;
  padding:.1rem;
  .block-item {
    height: .18rem;
    line-height: .18rem;
    font-size: .16rem;
    text-align: center;
  }
}
.search {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .pd {
    padding-top: .1rem;
  }
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
    .cell-wrap {
      margin-bottom: .1rem;
    }
    .friend-item {
      padding: 0 .1rem;
      height: .6rem;
      background:#dad0d0;
      display: flex;
      align-items: center;
      .face {
        width: .45rem;
        height: .45rem;
        background-size: cover !important;
        border-radius: 50%;
      }
      .name {
        padding-left: .1rem;
        font-size: .18rem;
      }
    }
    .delete-button {
      height: 100%;
    }
  }
  .btn-wrap {
    .title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .15rem;
      .title {
        color: #232326;
        font-size: .16rem;
      }
      .img-icon {
        width: .15rem;
        height: .15rem;
        background: url("../assets/images/search-sprites.png") no-repeat;
        background-size: .5rem .5rem;
        background-position: 0 -.35rem;
      }
    }
    .search-wrap {
      padding-left: .15rem;
      overflow: hidden;
      .item {
        height: .24rem;
        display: flex;
        align-items: center;
        float: left;
        color: #686868;
        font-size: .12rem;
        padding: 0 .12rem;
        margin: 0 .1rem .1rem 0;
        background-color: #f0f2f5;
        border-radius: .04rem;
      }
    }
  }
  .text-wrap {
    padding-left: .15rem;
    .item {
      width: 3.6rem;
      height: .4rem;
      display: flex;
      align-items: center;
      position: relative;
      color: #686868;
      font-size: .12rem;
      &::after {
        width: 100%;
        height: 0rem;
        content: "";
        //     border-top: 0.01rem solid transparent;
        // background: #f0f2f5;
        border-bottom: .01rem solid #f0f2f5;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
  
}
</style>
